<template>
  <div class="container">
    <div class="app-container">
      <el-card>
        <!-- 搜索 -->
        <el-form
          :model="requestParameters"
          ref="requestParameters"
          label-width="80px"
        >
          <div class="filter-container">
            <el-row
              justify="space-between"
              type="flex"
              style="padding-bottom: 10zpx"
            >
              <!-- 顶行说明 -->
              <p class="red">说明：目前支持学科和关键字条件筛选</p>
              <!-- 新增试题 -->
              <el-button
                class="filter-item fr"
                size="small"
                style="margin-left: 10px"
                @click="handleChange()"
                type="success"
                icon="el-icon-edit"
                >新增试题</el-button
              >
            </el-row>
            <el-row :gutter="20">
              <el-col :span="6">
                <el-form-item label="学科" prop="subject">
                  <el-select
                    v-model="requestParameters.subject"
                    placeholder="请选择"
                    size="small"
                    style="width: 240px"
                    @keyup.enter="handleFilter"
                    @input="addinput"
                  >
                    <el-option
                      v-for="item in aaa"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="二级目录" prop="directoryName">
                  <el-select
                    v-model="requestParameters.directoryName"
                    placeholder="请选择"
                    size="small"
                    style="width: 240px"
                    @keyup.enter="handleFilter"
                  >
                    <el-option
                      v-for="item in xxx"
                      :key="item.id"
                      :label="item.directoryName"
                      :value="item.id"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="标签" prop="subjectName">
                  <el-select
                    v-model="requestParameters.subjectName"
                    placeholder="请选择"
                    size="small"
                    style="width: 240px"
                    @keyup.enter="handleFilter"
                  >
                    <el-option
                      v-for="item in yyy"
                      :key="item.id"
                      :label="item.subjectName"
                      :value="item.id"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="关键字" prop="keyword">
                  <el-input
                    placeholder="根据题干搜索"
                    style="width: 240px"
                    size="small"
                    v-model="requestParameters.keyword"
                    @keyup.enter="handleFilter"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="试题类型" prop="questionType">
                  <el-select
                    v-model="requestParameters.questionType"
                    placeholder="请选择"
                    size="small"
                    style="width: 240px"
                    @keyup.enter="handleFilter"
                  >
                    <el-option
                      v-for="item in questionType"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="难度" prop="difficulty">
                  <el-select
                    v-model="requestParameters.difficulty"
                    placeholder="请选择"
                    size="small"
                    style="width: 240px"
                    @keyup.enter="handleFilter"
                  >
                    <el-option
                      v-for="item in difficulty"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="方向" prop="direction">
                  <el-select
                    v-model="requestParameters.direction"
                    placeholder="请选择"
                    size="small"
                    style="width: 240px"
                    @keyup.enter="handleFilter"
                  >
                    <el-option
                      v-for="(item, index) in direction"
                      :key="index"
                      :label="item"
                      :value="index"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="录入人" prop="creator">
                  <el-select
                    v-model="requestParameters.creator"
                    placeholder="请选择"
                    size="small"
                    style="width: 240px"
                    @keyup.enter="handleFilter"
                  >
                    <el-option
                      v-for="item in creator"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>

              <el-col :span="6">
                <el-form-item label="题目备注" prop="remarks">
                  <el-input
                    v-model="requestParameters.remarks"
                    size="small"
                    style="width: 240px"
                    @keyup.enter="handleFilter"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="企业简称" prop="shortName">
                  <el-input
                    v-model="requestParameters.shortName"
                    size="small"
                    style="width: 240px"
                    @keyup.enter="handleFilter"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="城市" prop="province">
                  <template>
                    <el-select
                      v-model="requestParameters.province"
                      placeholder="请选择"
                      size="small"
                      style="width: 50%; margin-right: 5%"
                      @keyup.enter="handleFilter"
                      @change="handleProvince"
                      filterable
                    >
                      <el-option
                        v-for="item in citySelect.province"
                        :key="item"
                        :label="item"
                        :value="item"
                      ></el-option>
                    </el-select>
                    <el-select
                      v-model="requestParameters.city"
                      placeholder="请选择"
                      size="small"
                      style="width: 50%; margin-right: -5%"
                      @keyup.enter="handleFilter"
                      filterable
                    >
                      <el-option
                        v-for="item in citySelect.cityDate"
                        :key="item"
                        :label="item"
                        :value="item"
                      ></el-option>
                    </el-select>
                  </template>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="">
                  <el-row type="flex" justify="end">
                    <el-button size="small" @click="reset">清除</el-button>
                    <el-button size="small" type="primary" @click="handleFilter"
                      >确认</el-button
                    >
                  </el-row>
                </el-form-item>
              </el-col>
            </el-row>
            <!-- tab选项卡 -->
            <el-row>
              <el-tabs v-model="activeName" @tab-click="tabclick" type="card">
                <el-tab-pane label="全部"></el-tab-pane>
                <el-tab-pane label="待审核"></el-tab-pane>
                <el-tab-pane label="已审核"></el-tab-pane>
                <el-tab-pane label="已拒绝"></el-tab-pane>
              </el-tabs>
              <el-alert type="info" class="alert" :closable="false" show-icon>{{
                alertText
              }}</el-alert>
            </el-row>
          </div>
        </el-form>
        <!-- 数据记录 -->

        <!-- 表单 -->
        <el-table :data="tableData.items" border style="width: 100%">
          <el-table-column prop="number" label="试题编号" width="150">
          </el-table-column>
          <el-table-column prop="subject" label="学科" width="120">
          </el-table-column>
          <el-table-column prop="catalog" label="目录" width="120">
          </el-table-column>
          <el-table-column prop="questionType" label="题型" width="120">
            <template slot-scope="{ row }">
              <span v-if="row.questionType === '1'">单选</span>
              <span v-else-if="row.questionType === '2'">多选</span>
              <span v-else-if="row.questionType === '3'">简答</span>
            </template>
          </el-table-column>
          <el-table-column prop="question" label="题干" width="300">
            <template slot-scope="scope">
              <span v-html="scope.row.question"></span>
            </template>
          </el-table-column>
          <el-table-column prop="addDate" label="录入时间" width="120">
            <template slot-scope="{ row }">
              {{ row.addDate | parseTimeByString }}
            </template>
          </el-table-column>
          <el-table-column prop="difficulty" label="难度" width="120">
            <template slot-scope="{ row }">
              <span v-if="row.difficulty === '1'">简单</span>
              <span v-else-if="row.difficulty === '2'">一般</span>
              <span v-else-if="row.difficulty === '3'">困难</span>
            </template>
          </el-table-column>
          <el-table-column prop="creator" label="录入人" width="120">
          </el-table-column>
          <el-table-column prop="chkState" label="审核状态" width="120">
            <template slot-scope="{ row }">
              <span v-if="row.chkState === 0">待审核</span>
              <span v-else-if="row.chkState === 1">通过</span>
              <span v-else-if="row.chkState === 2">拒绝</span>
            </template>
          </el-table-column>
          <el-table-column prop="chkRemarks" label="审核意见" width="120">
          </el-table-column>
          <el-table-column prop="chkUser" label="审核人" width="120">
          </el-table-column>
          <el-table-column prop="publishState" label="发布状态" width="120">
            <template slot-scope="{ row }">
              <span v-if="row.chkState === 0 || row.chkState === 2"
                >待发布</span
              >
              <span v-else-if="row.chkState === 1">已发布</span>
            </template>
          </el-table-column>
          <el-table-column
            type="flex"
            justify="end"
            fixed="right"
            label="操作"
            width="200"
            style="text-align: center"
          >
            <template slot-scope="{ row }">
              <el-button @click="handleClick(row.id)" type="text" size="small"
                >预览</el-button
              >
              <el-button
                type="text"
                size="small"
                @click="shenhe(row.id)"
                :disabled="row.chkState === 1"
                >审核</el-button
              >
              <el-button type="text" size="small" @click="handleChange(row)"
                >修改</el-button
              >
              <el-button type="text" size="small" @click="sold(row.id)">{{
                row.publishState ? "下架" : "上架"
              }}</el-button>
              <el-button
                type="text"
                size="small"
                :disabled="row.publishState === 1"
                @click="btndialogDelete(row.id)"
                >剪除</el-button
              >
            </template>
          </el-table-column>
        </el-table>

        <!-- 分页 -->
        <el-row type="flex" justify="end">
          <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="Number(requestParameters.page)"
            :total="Number(total)"
            :page-size="Number(requestParameters.pagesize)"
            :page-sizes="[5, 10, 15, 20, 25]"
            layout=" prev, pager, next, sizes, jumper"
          ></el-pagination>
        </el-row>

        <!-- 弹框 -->
        <!-- 预览弹框 -->
        <Dialog :formBase="formData" :dialogVisible.sync="dialogVisible">
        </Dialog>
        <!-- 审核弹框 -->
        <Dialog2
          ref="formData"
          :formBase="formData"
          :dialogshenhe.sync="dialogshenhe"
          @choice="choice"
        ></Dialog2>
        <!-- 上架弹框 -->
        <el-dialog
          title="提示"
          ref="formDataSold"
          :model="formData"
          :visible.sync="dialogSold"
          width="30%"
          @close="dialogSold = false"
        >
          <i
            class="el-icon-warning"
            style="color: #e6a23c; margin-right: 8px; font-size: 24px"
            width="100%"
          ></i>
          <span>{{
            this.formData.publishState
              ? "您确认下架这道题目吗?"
              : "您确认上架这道题目吗?"
          }}</span>
          <span slot="footer" class="dialog-footer">
            <el-row type="flex" justify="end">
              <el-button size="mini" @click="dialogSold = false"
                >取 消</el-button
              >
              <el-button size="mini" type="primary" @click="btnSold"
                >确 定</el-button
              >
            </el-row>
          </span>
        </el-dialog>
        <!-- 删除弹框 -->
        <el-dialog
          title="提示"
          ref="formDataDelete"
          :model="formData"
          :visible.sync="dialogDelete"
          width="30%"
          @close="dialogDelete = false"
        >
          <i
            class="el-icon-warning"
            style="color: #e6a23c; margin-right: 8px; font-size: 24px"
            width="100%"
          ></i>
          <span>此操作将永久删除该题目, 是否继续?</span>
          <span slot="footer" class="dialog-footer">
            <el-row type="flex" justify="end">
              <el-button size="mini" @click="dialogDelete = false"
                >取 消</el-button
              >
              <el-button size="mini" type="primary" @click="btnDelete"
                >确 定</el-button
              >
            </el-row>
          </span>
        </el-dialog>
      </el-card>
    </div>
  </div>
</template>

<script>
import { difficulty, questionType, direction, chkType, publishType, creator } from '@/api/hmmm/constants'
import { simple } from '@/api/hmmm/subjects'
import { list } from '@/api/hmmm/directorys'
import { list as list2 } from '@/api/hmmm/tags'
import { choice, choicePublish } from '@/api/hmmm/questions'
import { provinces, citys } from '@/api/hmmm/citys.js'
import Dialog from './../components/questions-previewA'
import Dialog2 from './../components/questions-check'
export default {
  data() {
    return {
      // form 表单
      formData: {
        subjectID: '', // 学科
        catalogID: '', // 二级目录
        tags: '', // 标签
        questionType: '', // 试题类型
        difficulty: '', // 难度
        direction: '', // 方向
        remarks: '', // 题目备注
        id: '', // 编号
        question: '', // 题干
        videoURL: '', // 解析视频
        answer: '', // 答案解析
        chkRemarks: '', // 审核意见
        chkState: '', // 审核
        publishState: '' // 上架

      },
      dialogVisible: false,
      activeName: 'first',
      alertText: '',

      // 条数
      total: null,
      tableData: [],
      // tab选项卡
      aaa: [],
      // 表单绑定
      requestParameters: {
        page: 1,
        pagesize: 5,
        subject: '', // 学科
        questionType: '', // 试题类型
        difficulty: '', // 难度
        direction: '', // 方向
        creatorID: '', // 录入人
        keyword: '' // 录入

      },
      // 城市
      citySelect: {
        province: [],
        cityDate: []
      },
      // 拿到预览的那一行内容
      yulan: [],
      // 审核框显示
      dialogshenhe: false,
      // 上架弹框
      dialogSold: false,
      // 删除弹框
      dialogDelete: false,
      // 学科id
      bbb: [],
      ccc: [],
      xxx: [],
      yyy: []

    }
  },
  created() {
    this.choice()
    this.simple()
    this.getCityData()
  },
  components: {
    Dialog,
    Dialog2
  },
  computed: {
    // 录入人
    creator() {
      return creator
    },
    // 难度
    difficulty() {
      return difficulty
    },
    // 题型
    questionType() {
      return questionType
    },
    // 方向
    direction() {
      return direction
    },
    // 精品审核
    chkType() {
      return chkType
    },
    // 发布状态
    publishType() {
      return publishType
    }
  },
  methods: {
    // 数据列表
    async choice(params) {
      const { data } = await choice(this.requestParameters)
      this.yulan = data.items
      this.tableData = data
      // console.log(this.tableData)

      // 获取总条数
      this.total = data.counts
      this.alertText = `共 ${this.total} 条记录`
    },
    // 学科简单列表
    async simple() {
      const { data } = await simple()
      this.aaa = data
    },
    // 二级目录
    async addinput() {
      if (this.requestParameters.subject) {
        const { data } = await list(this.requestParameters.subject)
        const datas = await list2(this.requestParameters.subject)
        // 所有的二级目录
        this.bbb = data.items
        // console.log(this.bbb)
        // 所有标签
        this.ccc = datas.data.items
        // console.log(this.ccc)
        // 复合条件的二级目录
        this.xxx = this.bbb.filter(item => item.subjectID === this.requestParameters.subject)
        // console.log(this.xxx)
        // 符合条件的标签
        this.yyy = this.ccc.filter(item => item.subjectID === this.requestParameters.subject)
        // console.log(this.yyy)
      }
    },

    // 搜索信息
    handleFilter() {
      this.requestParameters.page = 1
      this.choice(this.requestParameters)
      // console.log(this.requestParameters)
    },
    // 每页显示信息条数
    handleSizeChange(val) {
      this.requestParameters.pagesize = val
      if (this.requestParameters.page === 1) {
        this.choice(this.requestParameters)
      }
    },
    // 进入某一页
    handleCurrentChange(val) {
      this.requestParameters.page = val
      this.choice()
    },
    // 选项卡
    tabclick(tab, event) {
      this.requestParameters.page = 1
      if (tab.index === '0') {
        this.requestParameters.chkState = null
        this.choice(this.requestParameters)
      } else {
        this.requestParameters.chkState = tab.index - 1
        this.choice(this.requestParameters)
      }
    },
    // 获取省
    getCityData: function () {
      this.citySelect.province = provinces()
    },
    // 选省获取到市
    handleProvince: function (e) {
      this.citySelect.cityDate = citys(e)
      this.requestParameters.city = this.citySelect.cityDate[0]
    },
    // 重置
    reset() {
      this.$refs.requestParameters.resetFields()
    },

    // 表格操作
    operation(id) {
      this.yulan.forEach(item => {
        if (item.id === id) {
          this.formData = item
        }
      })
    },
    // 预览
    handleClick(id) {
      this.dialogVisible = true
      this.operation(id)
    },
    updated() {
      this.shenhe()
      this.btnSold()
    },
    // 审核
    shenhe(id) {
      this.dialogshenhe = true
      this.operation(id)
    },
    // 下架
    sold(id) {
      this.dialogSold = true
      this.operation(id)
    },
    async btnSold() {
      this.dialogSold = false
      if (this.formData.publishState === 1) {
        this.formData.publishState = 0
      } else if (this.formData.publishState === 0) {
        this.formData.publishState = 1
      }
      await choicePublish(this.formData)
      this.$message.success(`${this.formData.publishState ? '上' : '下'}架成功`)
      console.log(this.formData.publishState)
      this.dialogSold = false
      this.$nextTick(() => {
        this.choice()
      })
    },
    // 删除
    btndialogDelete(id) {
      this.dialogDelete = true
      this.operation(id)
    },
    btnDelete() {
      this.dialogDelete = false
      this.yulan.splice(this.formData, 1)
      // this.yulan.splice(this.yulan.findIndex(item => {
      //   item.id === id
      // }), 1)
      this.requestParameters = this.yulan
      this.$message.success('删除成功')
      // this.choice(this.requestParameters )
    },
    handleChange(data) {
      this.$router.push({ path: 'new', query: { id: data.id } })
    }
  }

}

</script>

<style scoped lang='scss'>
.alert {
  margin: 10px 0px;
}
.app-container {
  margin: -10px;
}
.el-row {
  // margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.el-col {
  border-radius: 4px;
}
.grid-content {
  min-height: 36px;
  line-height: 36px;
  text-align: center;
  border: 1px solid #dcdfe6;
  border-collapse: collapse;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
.red {
  color: #ffc0cb;
  font-size: 12px;
  margin-top: -5px;
}
</style>
